web-artifacts-builder Skill

概述

web-artifacts-builder 是一个用于构建复杂前端 artifacts 的 Claude Skill，专门处理需要状态管理、路由和 shadcn/ui 组件的复杂 React 应用，与专注于设计哲学的 frontend-design Skill 形成互补关系。

关键内容

1. 核心功能：
2. 专门用于构建复杂的 React artifacts，而非简单的单文件 HTML/JSX
3. 支持状态管理、路由和 shadcn/ui 组件

4. 将多组件 React 应用打包成单个可分享的 HTML 文件

5. 技术栈：

6. React 18 + TypeScript + Vite 开发环境
7. Parcel + html-inline 打包成单文件 HTML
8. Tailwind CSS 3.4.1 样式框架
9. 预配置 40+ shadcn/ui 组件及 Radix UI 基础依赖

10. 支持路径别名 @/ 配置

11. 工作流程：

12. 初始化项目：使用 bash scripts/init-artifact.sh <project-name>
13. 开发 artifact：编写业务代码，利用预配置的工具链
14. 打包：运行 bash scripts/bundle-artifact.sh 生成单个 HTML 文件
15. 分享：通过 present_files 工具展示给用户

来源

• web-artifacts-builder Skill 深度解析 — 深度调查文档

相关

• Agent Skills — Claude 的各种技能工具
• Claude Connectors — Claude 连接外部工具的方式
• frontend-design Skill — 互补的设计哲学技能